<template>
  <div class="" style="box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px">
    <div class="navbar-wrap">
      <div class="new-nav-page list-scroll-white" style="width: 100%">
        <headerCon></headerCon>
      </div>
    </div>
  </div>
  <div class="model-list-content">
    <div class="category-of-the-entire-station">
      <div class="nav-class-category">
        <!-- class="active"-->
        <a @click="navClick(item)" v-for="(item, index) in navMenu"
          :class="item.id === navConfig.click_menu.id ? 'active' : ''" :key="index">{{ item["title"] }}</a>
      </div>
    </div>
    <div class="list-content">
      <!-- 筛选区 -->
      <div class="spacing-content">
        <div class="news-class-layout new-version-classification">
          <!-- 分类筛选 -->
          <div class="model-classification" style="">
            <!--    分类筛选开始               -->
            <div class="sort-filter-one-class clearfix" :class="expand ? 'expand' : ''"
              :style="expand ? `overflow:unset` : `overflow:hidden`">
              <span>大类:</span>
              <ul class="clearfix list-class-click">
                <li>
                  <a :class="navConfig.two_active_id == 0 ? 'active' : ''" @click="bigAll">
                    全部</a>
                </li>
                <li v-for="(child, c_index) in navConfig.click_menu.children" :key="c_index">
                  <a @click="bigTypeClick(child)" :class="navConfig.two_active_id == child.id ? 'active' : ''">
                    {{ child["title"] }}</a>
                  <a @click="bigAll" class="close-a-icon sort-filter-item" rel="nofollow" :style="navConfig.two_active_id == child.id
                    ? `display: block`
                    : `display: none`
                    "></a>
                </li>
              </ul>
              <i class="sort-more-develop" :style="navConfig.click_menu.children.length >= 18
                ? `display: inline-block;`
                : `display: none`
                " @click="expandClick">
                <el-icon class="icon icon-nav-more">
                  <ArrowDown />
                </el-icon>
              </i>
            </div>
            <div class="sort-filter-one-class clearfix" :style="navConfig.two_active_id == 0
              ? `display: none`
              : `display: block`
              ">
              <span>细分:</span>
              <ul class="clearfix list-class-click">
                <li>
                  <a @click="smallClickAll" :class="navConfig.three_active_id == 0 ? 'active' : ''">
                    全部
                  </a>
                </li>
                <li v-for="(child_v, c_v_index) in threeMenuList" :key="c_v_index">
                  <a @click="smallTypeClick(child_v)" :class="navConfig.three_active_id == child_v['id'] ? 'active' : ''
                    ">{{ child_v["title"] }}</a>
                  <a @click="smallClickAll" class="close-a-icon sort-filter-item" :style="navConfig.three_active_id == child_v['id']
                    ? `display: block`
                    : `display: none`
                    "></a>
                </li>
              </ul>
              <i class="sort-more-develop" data-type="0" style="display: none">
                <svg class="icon icon-nav-more" aria-hidden="true">
                  <use xlink:href="#icon-direction_single_arrow_up_s"></use>
                </svg>
              </i>
            </div>
            <!--     分类筛选结束-->
          </div>
          <div class="small-screen-show clearfix" style="display: flex; display: none">
            <h1 class="search-word"></h1>
            <div class="item-small-screen clearfix">
              <div class="item-select">
                <span>
                  渲染器
                  <el-icon class="icon">
                    <ArrowDown />
                  </el-icon>
                </span>
                <div class="href-hover-select">
                  <div class="sort-list">
                    <a rel="nofollow" ll-buriedpoint="3-0" sc-point="1" ll-buriedpoint-type="click_res_list_filter"
                      class="active ll_point_jsfun" href="#">全部</a>
                    <a rel="nofollow" ll-buriedpoint="3-1" sc-point="1" ll-buriedpoint-type="click_res_list_filter"
                      class="ll_point_jsfun" href="#">VR</a>
                    <a rel="nofollow" ll-buriedpoint="3-2" sc-point="1" ll-buriedpoint-type="click_res_list_filter"
                      class="ll_point_jsfun" href="#">CR</a>
                  </div>
                </div>
              </div>
            </div>
            <!-- 推荐类型 展览、或搜索词相关的时候不显示 -->
            <div class="item-small-screen clearfix">
              <div class="item-select">
                <span>
                  <span class="js-recommend-title">推荐类型</span>
                  <el-icon class="icon">
                    <ArrowDown />
                  </el-icon>
                </span>
                <div class="href-hover-select">
                  <div class="sort-list">
                    <a rel="nofollow" ll-buriedpoint="4-0" sc-point="2" ll-buriedpoint-type="click_res_list_filter"
                      class="active ll_point_jsfun" href="#">全部</a>
                    <a rel="nofollow" ll-buriedpoint="4-1" sc-point="2" ll-buriedpoint-type="click_res_list_filter"
                      class="ll_point_jsfun" href="#">精品</a>
                    <a rel="nofollow" ll-buriedpoint="4-2" sc-point="2" ll-buriedpoint-type="click_res_list_filter"
                      class="ll_point_jsfun" href="#">品牌</a>
                    <a rel="nofollow" ll-buriedpoint="0-2" sc-point="2" ll-buriedpoint-type="click_res_list_filter"
                      class="ll_point_jsfun" href="#">VIP</a>
                  </div>
                </div>
              </div>
            </div>
            <!-- 风格 展览的时候不显示 -->
            <!-- 风格筛选 -->
            <div class="item-screen clearfix">
              <div class="item-select">
                <span>
                  全部风格
                  <el-icon class="icon">
                    <ArrowDown />
                  </el-icon>
                </span>
                <div class="href-hover-select style-hover-select">
                  <div class="sort-list">
                    <a sc-point="3" rel="nofollow" href="#" class="sort-item active">全部</a>
                    <a sc-point="3" rel="nofollow" href="#" class="sort-item">现代</a>
                  </div>
                </div>
              </div>
            </div>
            <!-- 展览分类 -->
            <!-- 文件大小 -->
            <div class="item-small-screen clearfix">
              <div class="item-select">
                <span>
                  压缩包大小
                  <el-icon class="icon">
                    <ArrowDown />
                  </el-icon>
                </span>
                <div class="href-hover-select size-hover-select">
                  <div class="sort-list">
                    <!-- sc-point="15" buried-text="埋点内容去掉M单位" 用于埋点-->
                    <a rel="nofollow" sc-point="15" ll-buriedpoint-type="click_res_list_filter" href="#"
                      class="ll_point_jsfun active" buried-text="">全部大小</a>
                    <a rel="nofollow" sc-point="15" ll-buriedpoint-type="click_res_list_filter" href="#"
                      class="ll_point_jsfun" buried-text="0-1">≤1M</a>x
                    <div class="sort-item-clean">
                      <span class="tip">自定义筛选项</span>
                      <span class="sort-size-empty" style="display: none">清除</span>
                    </div>
                    <div class="size-input-custom">
                      <input type="text" class="screen-size-num1" value="" />
                      <span>-</span>
                      <input type="text" class="screen-size-num2" value="" />
                      <span>M</span>
                    </div>
                    <div class="sort-item-size-btn clearfix">
                      <span class="sort-for-search">筛选</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <a rel="nofollow" href="#" class="right-delete">
              <el-icon class="icon">
                <RefreshLeft />
              </el-icon>
              <span>重置筛选</span>
            </a>
          </div>
        </div>
      </div>
      <!-- 内容区 -->
      <div class="list-type-content tentative-superposition-mask">
        <ul id="waterfall" v-if="productClassArr.length > 0" class="waterfall experiment-view-waterfall"
          v-infinite-scroll="load" infinite-scroll-distance="600" :infinite-scroll-disabled="disabled"
          style="overflow: auto">
          <el-space wrap :size="17">
            <li class="image-boxs" v-for="(item, index) in productClassArr" :key="index">
              <div class="list-model-collect" v-if="item.originate == 1">
                <span>创意Pro</span>
              </div>
              <div class="model-contrast" @click="productCareClick(item)">
                <div class="ll_point_jsfun js_favorite_popup">
                  <el-icon class="icon" :color="item.is_collect ? 'red' : ''">
                    <component is="StarFilled"></component>
                  </el-icon>
                  <span class="balloon-tips">{{
                    item.is_collect ? "已收藏" : "收藏"
                  }}</span>
                </div>
              </div>
              <a @click="productDetailClick(item.id, item.ascription, item.nav_one_id, item.nav_two_id, item.nav_three_id)"
                class="model-buried-point">
                <div class="cover-images" style="height: 140px">
                  <img :src="item.image_url" class="load_img" :alt="item.title" @error.once="useDefaultImage" />
                </div>
                <div class="model-goods-info clearfix">
                  <p class="model-goods-name">
                    {{ item.title }}
                  </p>
                </div>
              </a>
            </li>
          </el-space>
        </ul>
        <ul style="display: flex; justify-content: center; align-items: center; min-height: 400px;" v-else> <el-empty
            description="暂无数据" /></ul>
      </div>
      <div v-if="isShow">
        <div style="text-align: center; margin-bottom: 50px" v-if="loading">
          加载中...
        </div>
        <div style="text-align: center; margin-bottom: 50px" v-if="noMore">
          没有更多了
        </div>
      </div>
    </div>
    <!-- 吸顶 -->
    <div class="nav-list-ceiling top-sorption-ceiling" style="display: block">
      <flexHeader></flexHeader>
    </div>
  </div>
  <login></login>
  <footerContent></footerContent>
</template>
<script setup lang="ts">
import headerCon from "../../components/header.vue";
import login from "../../components/login.vue";
import flexHeader from "../../components/flex_header.vue";
import footerContent from "../../components/footerContent.vue";
import { useNavConfig } from "../../stores/navConfig";
import { useUserInfo } from "../../stores/userInfo";
import { productClass } from "../../api/product/index";
import { productCare } from "../../api/home/index";
const userInfo = useUserInfo(); //获取用户信息
import router from '../../router'
import { ElMessage } from "element-plus";
import eventBus from "../../utils/event-bus";
import { onMounted, ref, computed, nextTick, onUnmounted } from "vue";
import { encrypt, DEFAULTKEY } from '../../utils/keyEnum'
const navConfig = useNavConfig();

import { useSiteConfig } from '../../stores/siteConfig'
const siteConf = useSiteConfig()
import { useSearch } from "../../stores/search";
const search = useSearch()
const navMenu: any = navConfig.all;
const checkMenu: any = navConfig.click_menu; //一级
const twoMenu: any = navConfig.twoMenu; //二级
const threeMenuList = ref([]);
if (navConfig.clickGrade == 2) {
  threeMenuList.value = checkMenu.children[navConfig.indexActive]["children"];
} else {
  threeMenuList.value = twoMenu.children;
}
//大类
const isShow = ref(true);
const productTotal = ref(0);
const page = ref(1);
const limit = ref(10);
const loading = ref(false);
const noMore = computed(() => page.value * limit.value > productTotal.value);
const disabled = computed(() => loading.value || noMore.value);

const productClassArr = ref<any>([]);
const productClassInfo = () => {
  productClass({
    pid: navConfig.productPid,
    id: navConfig.productId,
    type: navConfig.selectType,
    search: search.searchValue,
    page: page.value,
    limit: limit.value,
  }).then((res: any) => {
    if (res.code == 1) {
      productTotal.value = Number(res.data.total);
      if (res.data.list.length > 0) {
        productClassArr.value = [...productClassArr.value, ...res.data.list];
      } else {
        isShow.value = false
      }
    }
  });
};
//加载BusEvent
eventBus.on('initProduct', () => {
  productClassArr.value = [];
  page.value = 1
  getListInfo()
})

//加载BusEvent
eventBus.on('initList', () => {
  productClassArr.value = [];
  page.value = 1
  getListInfo()
})



//详情
const productDetailClick = (id: number, ascription: any, nav_id: number, nav_two_id: number, nav_three_id: number) => {
  navConfig.setTwoActiveId(nav_two_id);
  navConfig.setTreeActiveId(nav_three_id);
  const queryToAse = encrypt({
    product_id: id,
    ascription: ascription
  }, DEFAULTKEY)
  nextTick(() => {
    const resolvedRoute = router.resolve({
      name: '/product-detail',

      query: { value: queryToAse }

    });

    window.open(resolvedRoute.href, '_blank');
  });
}
//下拉加载
const load = () => {
  loading.value = true;
  setTimeout(() => {
    page.value++;
    productClassInfo();
    loading.value = false;
  }, 2000);
};
const useDefaultImage = (event: any) => {
  event.target.src = siteConf.defalut_product_img
}


onMounted(() => {
  getListInfo()
});

onUnmounted(() => {
  //清空搜索框
  search.clearSearchValue()
})

//大类切换
const bigTypeClick = (child: any) => {
  threeMenuList.value = child.children;
  navConfig.setTwoNav(child);
  navConfig.setTwoActiveId(child.id);
  navConfig.setTreeActiveId(0);
  productClassArr.value = [];
  navConfig.setProductId(child.id)
  navConfig.setProductPid(child.id)
  navConfig.setSelectType('big')
  page.value = 1;
  getListInfo()
};


//加载BusEvent 大类
eventBus.on('bigTypeClick', (res: any) => {
  productClassArr.value = [];
  page.value = 1
  bigTypeClick(res.child)
})

//主类型切换
const navClick = (item: any) => {
  navConfig.dataFill(item);
  navConfig.setTwoNav(item.children);
  navConfig.removeThree();
  threeMenuList.value = [];
  navConfig.setTwoActiveId(0);
  productClassArr.value = [];
  navConfig.setProductPid(item.id)
  navConfig.setSelectType('all')
  page.value = 1;
  getListInfo()
};
//大类全部
const bigAll = () => {
  navConfig.setTwoActiveId(0);
  navConfig.removeThree();
  threeMenuList.value = [];
  productClassArr.value = [];
  navConfig.setProductId(0)
  navConfig.setProductPid(navConfig.click_menu.id)
  navConfig.setSelectType('all')
  page.value = 1;
  getListInfo()
};
//细分类全部
const smallClickAll = () => {
  navConfig.setTreeActiveId(0);
  productClassArr.value = [];
  navConfig.setProductId(0)
  navConfig.setSelectType('big')
  page.value = 1;
  getListInfo()
};
//细分类切换点击事件
const smallTypeClick = (item: any) => {
  navConfig.setTreeActiveId(item.id);
  productClassArr.value = [];
  navConfig.setProductId(item.id)
  navConfig.setSelectType('small')
  page.value = 1;
  getListInfo()
};
//加载BusEvent 大类
eventBus.on('smallTypeClick', (res: any) => {
  console.log(res.child)
  productClassArr.value = [];
  page.value = 1
  smallTypeClick(res.child)
})

const getListInfo = () => {
  productClassInfo();
}

//大类展开
const expand = ref(true);
const expandClick = () => {
  expand.value = !expand.value;
};

//收藏
const productCareClick = (item: any) => {
  if (!userInfo.isLogin()) {
    eventBus.emit("customEvent", {
      dis: true,
    });
  } else {
    productCare({ id: item.id }).then((res: any) => {
      if (res.code == 1) {
        item.is_collect = !item.is_collect;
        ElMessage.success(item.is_collect ? "收藏成功" : "取消收藏成功");
      }
    });
  }
};
</script>

<style scoped></style>
